<template>
  <div>
    <h5 class="text-center">
      <div>{{ related.customer_name }}</div>
      <div>项目审批表</div>
    </h5>

    <table class="table table-sm table-bordered approve-table" v-if="isCompany">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tbody>
        <tr>
          <td>客户名称</td>
          <td>{{ related.customer_name }}</td>
          <td>经营地址</td>
          <td>{{ related.address || '' }}</td>
        </tr>
        <tr>
          <td>组织类型</td>
          <td>{{ orgClassName }}</td>
          <td>统一信用代码</td>
          <td>{{ related.register_no || '' }}</td>
        </tr>
        <tr>
          <td>负责人名称</td>
          <td>{{ related.corp_name || '' }}</td>
          <td>联系电话</td>
          <td>{{ related.mobile_no || '' }}</td>
        </tr>
        <tr>
          <td>经营范围</td>
          <td colspan="3" class="text-left px-2">{{ related.business_scope || '' }}</td>
        </tr>
      </tbody>
    </table>

    <table class="table table-sm table-bordered approve-table" v-else>
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tbody>
        <tr>
          <td>客户名称</td>
          <td>{{ related.customer_name }}</td>
          <td>联系电话</td>
          <td>{{ related.mobile_no || '' }}</td>
        </tr>
        <tr>
          <td>证件号</td>
          <td colspan="3">{{ related.lender_idcard || '' }}</td>
        </tr>
        <tr>
          <td>家庭地址</td>
          <td colspan="3">{{ related.address || '' }}</td>
        </tr>
        <tr>
          <td>经营范围</td>
          <td colspan="3" class="text-left text-indent">{{ related.business_scope || '' }}</td>
        </tr>
      </tbody>
    </table>

    <table class="table table-sm table-bordered approve-table">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tbody>
        <tr>
          <td>项目类型</td>
          <td>{{ guaTypeLabel }}</td>
          <td>担保产品</td>
          <td>{{ related.project_type_name || '' }}</td>
        </tr>
        <tr>
          <td>项目行业分类</td>
          <td>{{ related.parent_main_business }}</td>
          <td>贷款用途</td>
          <td>{{ related.funds_use_dir }}</td>
        </tr>
        <tr>
          <td>申请担保额度</td>
          <td>{{ related.apply_funds || '' }}万元</td>
          <td>申请担保额度期限</td>
          <td>{{ related.load_years || '' }}年</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { projectIsCompany } from '@/credit/views/county/unionProvince/components/projectApprove/index'
import { enumGuaTypeAbbr } from '@/credit/views/city/archives/mixins'
export default {
  components: {},
  props: {
    relatedData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      related: {},
    }
  },
  computed: {
    enumOrgClass() {
      return this.$store.getters.enumOrgClassObj
    },
    guaType() {
      return +this.related.gua_type
    },
    guaTypeLabel() {
      return enumGuaTypeAbbr[this.guaType] || ''
    },
    isCompany() {
      return projectIsCompany(this.related)
    },
    orgClassName() {
      return this.enumOrgClass[this.related.org_class] || ''
    },
  },
  watch: {
    relatedData: {
      handler: function (val) {
        this.related = val
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.$store.dispatch('getEnumOrgClass')
  },
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.file-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dotted #eee;

  &:last-child {
    border-bottom: none;
  }
}
.approve-table {
  text-align: center;
  margin-bottom: 0;
  margin-top: -1px;
  td {
    vertical-align: middle;
  }
}
</style>
